// 查看报价单 页面
<template>
  <div>
    <!-- <header-ad></header-ad> -->
    <nav-login></nav-login>
    <div class="w1200">
      <div class="logo">
        <wdf-logo></wdf-logo>
        <div class="seach">
          <el-input size="small" placeholder="产品型号/产品名称（用空格分开文字，如导向轴 标准）"></el-input>
          <el-button size="small" type="primary" icon="el-icon-search">搜 索</el-button>
        </div>
      </div>

      <p style="margin-bottom:20px">我的孚地 > 我的报价单 > 报价单</p>

      <qiotation-details></qiotation-details>
      <!-- <qiotatipon-form></qiotatipon-form> -->
      <div class="kkkk">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <p style="padding-left:9px;font-size:12px; line-height:20px">报价有效期 ：15天</p>
          <p style="padding-left:9px;font-size:12px; line-height:40px">
            <span style="padding-right:30px;">
              <i style="color:#ff0000">*</i> 报价单主题 ：************
            </span>
            <span>
              <i style="color:#ff0000">*</i> 城市 ：************
            </span>
          </p>
          <p style="padding-left:9px;color:red;font-size:12px;">以下为打印项:</p>
          <el-form-item label="发票:" prop="radio1" size="small">
            <el-radio v-model="ruleForm.radio" label="1">16%普票</el-radio>
            <el-radio v-model="ruleForm.radio" label="2">16%增票</el-radio>
          </el-form-item>
          <el-form-item label="价格显示:" prop="radio2" size="small">
            <el-radio v-model="ruleForm.radio2" label="1">销售价</el-radio>
            <el-radio v-model="ruleForm.radio2" label="2">会员价</el-radio>
            <el-radio v-model="ruleForm.radio2" label="3">未税价</el-radio>
          </el-form-item>
          <el-form-item label="产品显示:" prop="checkList" size="small">
            <el-checkbox-group v-model="ruleForm.checkList">
              <el-checkbox label="技术参数"></el-checkbox>
              <el-checkbox label="孚地订货号"></el-checkbox>
              <el-checkbox label="图片"></el-checkbox>
              <el-checkbox label="品牌"></el-checkbox>
              <el-checkbox label="型号"></el-checkbox>
              <el-checkbox label="货期"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <p style="padding-left:9px;color:red;font-size:12px;">
            <span class="el-icon-star-off"></span>
            产品显示可以多选
          </p>
          <el-row>
            <el-button class="btn01" type="warning">保存修改</el-button>
            <el-button class="btn02" type="info">导出PDF</el-button>
            <el-button class="btn03" type="danger" @click="jumpOrder">报价单转订单</el-button>
          </el-row>
        </el-form>
      </div>
    </div>

    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
  </div>
</template>
<script>
import wdfLogo from "../shoppingCart/components/Logo" // logo
import qiotationDetails from "../quotation/components/QiotationDetails" // 报价单的表单
export default {
  name: "watchQuotation",

  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value0: "",
      value1: "",
      value2: "",
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        radio1: "1", // 普票 增票
        radio2: "1", //价格显示
        checkList: ["选中且禁用", "复选框 A"]
      },
      rules: {
        name: [
          { required: true, message: "请输入报价单主题", trigger: "blur" }
        ],
        radio1: [
          { required: true, message: "请选择发票类型", trigger: "blur" }
        ],
        radio2: [{ required: true, message: "请选择价格显示", trigger: "blur" }]
      }
    }
  },

  methods: {
    // 报价单转订单
    jumpOrder() {
      this.$router.push({
        name: "confirmOrder",
        params: {}
      })
    },
    // 生成报价单
    generate() {
      this.$router.push({
        //路由页面传参
        name: "myOrder",
        params: {
          id: 3
        }
      })
    },

    // 表单提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!")
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },

    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  },

  components: {
    qiotationDetails,
    wdfLogo
  }
}
</script>
<style lang="scss" scoped>
.w1200 {
  width: 1200px;
  margin: auto;
  .logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .seach {
      width: 440px;
      display: flex;
      flex-direction: row;
      /deep/ .el-botton,
      .el-button--small {
        border-radius: 0px;
      }
      /deep/ .el-input__inner,
      .el-button--small {
        border-radius: 0px;
      }
    }
  }
  .kkkk {
    padding-top: 20px;
    border: 1px solid #f3f3f3;
    .fapiao {
      padding-left: 27px;
    }
    .btn01 {
      margin: 20px 827px 20px 20px;
    }
  }
}
</style>
